<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>联系方式</title>
		<link href="../css/head.css" rel="stylesheet"/>
		<style type="text/css">
			.contact{
				width: 1200px;
				height: 800px;
				border: 1px #ccc solid; 
				font-size: 14px; 
				font-family: "微软雅黑";
				background-color: #FFFFFF;
			}
			.top1,.main{
				width: 1000px;
				height: 100px;
				margin: 0px auto;
				padding: 30px;
			}
			.h2{
				padding-bottom:30px ;
			}
			.main{
				height: 500px;
				box-shadow: 10px 10px 10px #CCCCCC;
			}
			h3{
				margin: 20px 0px;
			}
			.left1, .right1{
				width: 480px;
				height: 500px;
				padding: 30px 0px;
			}
			.left1{
				float: left;
			}
			.right1{
				float: right;
			}
			.left1 > dl > dd > input{
				width: 400px;
				height: 25px;
				line-height: 25px;
				margin: 20px 0px;
			}
			textarea{
				width: 400px;
				height: 120px;
			}
			.btn{
				width: 50px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				margin-top:10px ;
				background-color: #ff8726;
				color: #fff;
				border: none;
			}
			.img_adderss{
				width: 400px;
				height: 200px;
				background-image: url(../img/b2.jpg);
				background-size: 100% 100%;
			}
			.img_adderss img{
				width: 100%;
				height: 90%;
			}
			.adderss{
				width: 260px;
				line-height: 25px;
			}
			.top1 p{
				padding-bottom: 15px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="top_head">
				<h2>杨耀明 | 个人网站</h2>
			</div>
			<!-- 导航栏 -->
			<div class="top_nav">
				<ul>
					<li id="li_1"><a href="../index.html">网站首页</a></li>
					<li><a href="AboutMe.html" >个人档案</a>
						<!-- <ul id="ul_1">
							<li><a href="Education.html">教育背景</a></li>
							<li><a href="Experience.html">奖项荣誉</a></li>
						</ul> -->
					</li>
					<li><a href="ShowCase.html">我的作品</a></li>
					<li><a href="Photo.html">个人相册</a></li>
					<!-- <li><a href="Objective.html">求职意向</a></li> -->
					<li><a href="Contact.html" style="color: #FF8726;">联系方式</a></li>
				</ul>
			</div>
			<div id = top_nav1></div>
			<!-- 联系方式 -->
			<div class="contact">
				<div class="top1">
					<h2 class="h2">联系方式</h2>
					<p>如果您愿意给我一个机会，请通过下信息联系我。<br />	</p>
					<p>If you would like to give me a chance, please contact me through the following ways.</p>
				
				</div>
				<div class="main">
					<div class="left1">
						<h3>请填写您的联系方式</h3>
						<dl>
							<dt>Name:</dt>
							<dd><input type="text" id="t1"></dd>
						</dl>
						<dl>
							<dt>Email:</dt>
							<dd><input type="text" id="t2"></dd>
						</dl>
						<dl>
							<dt>Message:</dt>
							<dd><textarea id="t1"></textarea></dd>
						</dl>
						
							<button class="btn" onclick="send()">发送</button>
							
						
					</div>
					<div class="right1">
						<h3>我的位置</h3>
						<!-- 位置图片 -->
						<div class="img_adderss"><img src="../img/contact-adderss.jpg" /></div>
						
						<h3>邮寄地址</h3>
						<div class="adderss">
							xx省xx市碑林区东关南街古迹岭小区2号楼1单元401邮编710048<br /><br />
								联系电话: 152-3560-8888<br />
								电子邮箱: xiao1220@qq.com
							
						</div>
					</div>
				</div>
				
			</div>
			<!--页脚-->
			<footer><center>西南石油大学 2021级自动化 杨耀明</center></footer>
		</div>
		
				
		<!-- js代码 -->
		<script type="text/javascript">
			// 检测是否发送为空事件
			
			function send(){
				var val1 = document.getElementById("t1").value
				var val2 = document.getElementById("t2").value
				
				if (val1 == "" || val2 == "") {
					alert("请输入姓名和邮箱！");
				}else{
					alert("发送成功！");
				}
				
			}
		</script>
	</body>
</html>
